package myJs.tools.search

import com.softwaremill.quicklens._
import myJs.Utils.layer
import myJs.cps._
import myJs.projectCps._
import myJs.myPkg.Swal.swal
import myJs.myPkg._
import myJs.myPkg.reactHookForm._
import myJs.myPkg.tabs._
import myJs.tool.Tool
import myJs.tool.Tool._
import org.scalajs.dom.{URLSearchParams, window}
import japgolly.scalajs.react._
import myJs.myPkg.Hooks._
import japgolly.scalajs.react.vdom.all._
import myJs.Utils._
import scala.scalajs.js
import scala.scalajs.js.{Date, JSON}
import scala.scalajs.js.Dynamic.{global => g}

/** Created by yz on 3/11/2020
  */
object Cp {

  case class Props(idStr: String = ""){
    @inline def render: VdomElement = {
      Component(this)
    }
  }

  val Component = ScalaFnComponent[Props] { props =>

    val useForm = ReactHookForm.useForm(UseFormOptions(mode = "onChange"))
    val (keyword, setKeyword) = useState(Tool.getSymbol)
    val initTab = List("data", "anno", "gene")(0)
    val (tab, setTab) = useState(initTab)

    object FTool {

      def formSubmit = useForm.handleSubmit((data: js.Dictionary[js.Any]) => {
        println(JSON.stringify(data))
        val url = g.jsRoutes.controllers.ToolsController.searchBefore().url.toString
        window.location.href = s"${url}?symbol=${keyword}"
        ()
      })

      def symbolChange = (v: String) => {
        setKeyword(v)
      }

      def showExample(eg: String) = {
        FTool.symbolChange(eg)
      }

      def mySearch = () => {
        ()
      }

      def tabChange = (v: String) => {
        setTab(v)
      }

    }

    val egStr = "ABI3BP"

    div(
      FormProvider(
        control = useForm.control,
        formState = useForm.formState,
        setValue = useForm.setValue _
      )(
        form(
          onSubmit := FTool.formSubmit,
          className := "form-horizontal",
          div(
            className := "form-group",
            label(className := "control-label col-sm-3", s"Keyword:"),
            div(
              className := "col-sm-5",
              PureInputCp.Props(value = keyword, onChange = FTool.symbolChange, name = "geneName").render
            ),
            label(
              marginLeft := 15.px,
              className := "control-label",
              s"e.g., ",
              a(onClick --> FTool.showExample(egStr), em(egStr))
            )
          ),
        )
      ),
      hr(),
      Tabs(id = "tab", activeKey = tab, onSelect = FTool.tabChange, transition = false)(
        Tab(eventKey = "data", title = "SNP Data")(
          div(marginTop := "20px", DataTableCp.Props(keyword = keyword).render)
        ),
        Tab(eventKey = "anno", title = "SNP Anno")(
          div(marginTop := "20px", AnnoTableCp.Props(keyword = keyword).render)
        ),
        Tab(eventKey = "gene", title = "SNP Gene")(
          div(marginTop := "20px", GeneTableCp.Props(keyword = keyword).render)
        )
      )
    )

  }

}
